<template>
  <div ref="content" class="popup-container">
    <input type="text" @click="open" :placeholder="title" readonly :value='age' class="popup-input">
    <div ref="mask" class="popup-mask" @click="close"></div>
    <div ref="popup" class="popup-box">
      <div class="popup-box-in">
        <div class="popup-box-title">{{title}}</div>
        <div style="display: flex; margin:20px 0;">
          <div style="height: 120px; flex: 1;overflow:hidden; position: relative;" @mousewheel.prevent>
            <div style="border-top:.5px solid rgba(200,200,200,.9); border-bottom:.5px solid rgba(200,200,200,.9); height: 38px; width: 100%; position:absolute; top:40px; left: 0; "></div>
            <ul class="popup-list" ref="boxYear" style="position:absolute; width: 100%; top:0; left:0; color: #999;" @touchstart="touchStart($event,'year')" @touchmove="touchMove($event,'year')" @touchend="touchEnd($event,'year')">
              <li v-for="item in yearList" style="height: 20px;line-height: 20px;">
                <span class="text tc">{{item.text}}</span>
              </li>
            </ul>
          </div>
          <div style="height: 120px; flex: 1; overflow:hidden; position: relative;" @mousewheel.prevent>
            <div style="border-top:.5px solid rgba(200,200,200,.9); border-bottom:.5px solid rgba(200,200,200,.9); height: 38px; width: 100%; position:absolute; top:40px; left: 0; "></div>
            <ul class="popup-list" ref="boxMonth" style="position:absolute; width: 100%; top:0; left:0; color: #999;" @touchstart="touchStart($event,'month')" @touchmove="touchMove($event,'month')" @touchend="touchEnd($event,'month')">
              <li v-for="item in monthList" style="height: 20px;line-height: 20px;">
                <span class="text tc">{{item.text}}</span>
              </li>
            </ul>
          </div>
          <div style="height: 120px; flex: 1; overflow:hidden; position: relative;" @mousewheel.prevent>
            <div style="border-top:.5px solid rgba(200,200,200,.9); border-bottom:.5px solid rgba(200,200,200,.9); height: 38px; width: 100%; position:absolute; top:40px; left: 0; "></div>
            <ul class="popup-list" ref="boxDay" style="position:absolute; width: 100%; top:0; left:0; color: #999;" @touchstart="touchStart($event,'day')" @touchmove="touchMove($event,'day')" @touchend="touchEnd($event,'day')">
              <li v-for="item in dayList" style="height: 20px;line-height: 20px;">
                <span class="text tc">{{item.text}}</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="popup-box-bar"><i class="gray6" @click="close">取消</i><i class="blue" @click="confirm">确定</i></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'popupRadio',
  model: {
    prop: 'value',
    event: 'input'
  },
  props:{ 
    title:String,
    value:{
      type:[String, Number]
    },
    max:[String, Number],
    format:"yyyy-mm-dd"
  }, 
  data () {
    return {
      age: null,
      yearList:[],
      monthList:[],
      dayList:[],
      sel: {},
      selTemp: null,
      top: 0,
      startY: 0,
      touching: false
    }
  },
  mounted(){
    if(this.value){
      this.age = this.value;
    }
    var year = new Date().getFullYear(); 
    var month = new Date().getMonth()+1; 
    var day = new Date().getDate();  
    for (var i = 0; i < 100; i++) {
      this.yearList.push({
        text:year - i+ '年',
        val:year - i
      });
    }
    for (var i = 1; i <= 12; i++) {
      this.monthList.push({
        text:i+'月',
        val:i
      });
    }
    for (var i = 1; i <= 31; i++) {
      this.dayList.push({
        text:i+'日',
        val:i
      });
    }
    
    
  },
  methods:{
    open(){
      this.$refs.mask.style.display = 'block';
      this.$refs.popup.style.display = 'flex';
      var indexY = 0,indexM = 0,indexD = 0;
      if(this.age == null){ 
        var y = new Date().getFullYear() - 20;
        var d = new Date(y,new Date().getMonth() ,new Date().getDate());     
        this.sel.year = d.getFullYear();
        this.sel.month = d.getMonth() + 1;
        this.sel.day = d.getDate();
      }else{
        var y = new Date().getFullYear() - this.age;
        var d = new Date(y,new Date().getMonth() ,new Date().getDate());     
        this.sel.year = d.getFullYear();
        this.sel.month = d.getMonth() + 1;
        this.sel.day = d.getDate();        
      }

      if(this.selTemp){
        this.sel = this.selTemp;
        console.log(this.sel);
      }
      
      for (var i = 0; i < this.yearList.length; i++) {
        if(this.yearList[i]['val'] == this.sel.year){
          indexY = i;
        }
      }
      for (var i = 0; i < this.monthList.length; i++) {
        if(this.monthList[i]['val'] == this.sel.month){
          indexM = i;
        }
      }
      for (var i = 0; i < this.dayList.length; i++) {
        if(this.dayList[i]['val'] == this.sel.day){
          indexD = i;
        }
      }

      this.$refs.boxYear.style.transform = 'translate(0,' + (-40 * indexY + 40) + 'px)';
      this.$refs.boxMonth.style.transform = 'translate(0,' + (-40 * indexM + 40) + 'px)';
      this.$refs.boxDay.style.transform = 'translate(0,' + (-40 * indexD + 40) + 'px)';


      var listY = this.$refs.boxYear.getElementsByTagName('li');
      var listM = this.$refs.boxMonth.getElementsByTagName('li');
      var listD = this.$refs.boxDay.getElementsByTagName('li');

      for (var i = 0; i < listY.length; i++) {
        if(i === indexY) listY[i].style.color = "#000";
        else listY[i].style.color = "#999";
      }
      for (var i = 0; i < listM.length; i++) {
        if(i === indexM) listM[i].style.color = "#000";
        else listM[i].style.color = "#999";
      }
      for (var i = 0; i < listD.length; i++) {
        if(i === indexD) listD[i].style.color = "#000";
        else listD[i].style.color = "#999";
      }
    },
    close(){
      this.$refs.mask.style.display = 'none';
      this.$refs.popup.style.display = 'none';

      this.selTemp = {
        year:this.sel.year,
        month:this.sel.month,
        day:this.sel.day
      }

    },
    confirm(){
      function getAge(Y,M,D){
        var age = 0;
        var date = new Date();
        var nowY = date.getFullYear();
        var nowM = date.getMonth() + 1;
        var nowD = date.getDate();
        var d = (new Date(nowY,nowM-1,nowD).getTime() - new Date(Y,M-1,D).getTime())/(24*60*60*1000);
        if(d > 0){
          age = nowY - Y;
          if(nowY == Y){
            age = Math.round(d/365*10)/10;
          }else{        
            if(M - nowM > 0){
              age -= 1;
            }else if(M == nowM && D > nowD){
              age -= 1;
            }
          }
        }else{
          age = false;
        }
        return age;
      }
      this.selTemp = {
        year:this.sel.year,
        month:this.sel.month,
        day:this.sel.day
      }

      this.age = getAge(this.sel.year,this.sel.month,this.sel.day);
      this.$emit('input', this.age); 
      this.close();
    },
    touchStart(e,type) {
      var obj; 
      if(type == 'year'){
        obj = this.$refs.boxYear;
      }else if(type == 'month'){
        obj = this.$refs.boxMonth;
      }else if(type == 'day'){
        obj = this.$refs.boxDay;
      }else{
        return
      }
      this.startY = e.targetTouches[0].pageY;
      this.top = parseFloat(obj.style.transform.split(',')[1]) || 0; 
      this.touching = true;
      // this.$refs.box.style.transition = 'none';
    },
    touchMove(e,type) {
      var obj;
      if(type == 'year'){
        obj = this.$refs.boxYear;
      }else if(type == 'month'){
        obj = this.$refs.boxMonth;
      }else if(type == 'day'){
        obj = this.$refs.boxDay;
      }else{
        return
      }
      e.preventDefault();
      if (!this.touching) return;  
      var diff = e.targetTouches[0].pageY - this.startY;
      obj.style.transform = 'translate(0,' + (this.top + diff) + 'px)';
    },
    touchEnd(e,type) {
      var obj,list;
      if(type == 'year'){
        obj = this.$refs.boxYear;
        list = this.yearList;
      }else if(type == 'month'){
        obj = this.$refs.boxMonth;
        list = this.monthList;
        console.log()
      }else if(type == 'day'){
        obj = this.$refs.boxDay;
        list = this.dayList;
      }else{
        return
      }
      var t = parseFloat(obj.style.transform.split(',')[1]) || 0;
      var h = obj.offsetHeight * -1; 
      var s = Math.abs(t % 40) > 20 ? -1 : 0; 
      var top = (parseInt(t / 40) + s )*40;
      if(top < h + 80){ 
        top = h + 80;
      }
      if(top > 40){ 
        top = 40;
      }
      var n = Math.abs((top - 40)/40);
      var nodelist = obj.getElementsByTagName('li');
      for (var i = 0; i < nodelist.length; i++) {
        if(i === n) nodelist[i].style.color = "#000";
        else nodelist[i].style.color = "#999";
      }
      if(type == 'year'){
        this.sel.year = list[n]['val'];
      }else if(type == 'month'){
        var d = new Date(this.sel.year,this.sel.month,0);  
        this.sel.month = list[n]['val'];
      }else if(type == 'day'){
        this.sel.day = list[n]['val'];
      }
      obj.style.transform = 'translate(0,' + top + 'px)'; 
      obj.style.transition = 'transform .2s'; 
      this.touching = false;

      if(type == 'year' || type == 'month'){    
        var d = new Date(this.sel.year,this.sel.month,0).getDate();
        var dayList = [];
        for (var i = 1; i <= d; i++) {
          dayList.push({
            text:i+'日',
            val:i
          });
        }
        this.dayList = dayList;
        if(this.sel.day > this.dayList.length){
          this.sel.day = this.dayList.length;
          var _t = -40 * (this.dayList.length - 2);
          var dayNode = this.$refs.boxDay;
          var n = this.dayList.length - 1;
          var nodelist = dayNode.getElementsByTagName('li');
          for (var i = 0; i < nodelist.length; i++) {
            if(i === n) nodelist[i].style.color = "#000";
            else nodelist[i].style.color = "#999";
          }
          dayNode.style.transform = 'translate(0,' + _t + 'px)';
        }
      }
    }
  }
}
</script>
 